import React, { FC } from 'react';
import { FormInstance } from 'antd/lib/form';
import { Spin } from 'antd';
import ProTable, { ProColumns } from '@/components/ProTable';
import useHoxModel from '../../../../useHoxModel';
import { useUnmount } from 'ahooks';
import moment, { Moment } from 'moment';
import { ActivateCardParamsType } from '@/pages/Card/API';
import { arrayToEnum } from '@/utils/utils';

const OpenCardForm: FC<{ formRef: React.MutableRefObject<FormInstance | undefined> }> = ({
  formRef,
}) => {
  const { info, blankCardList, dispatch } = useHoxModel((model) => [
    model.info,
    model.blankCardList,
  ]);
  useUnmount(() => {
    formRef.current?.resetFields();
    dispatch({ info: {} });
  });
  //控制器类型枚举
  const blankCardTypeEnum = arrayToEnum<any>(blankCardList?.list || [], 'id', 'cardNo');

  const columns: ProColumns<ActivateCardParamsType>[] = [
    {
      title: '使用者:',
      rules: [
        {
          required: true,
        },
      ],
      formItemProps: { disabled: true },
      dataIndex: 'name',
    },
    {
      title: '卡片:',
      rules: [
        {
          required: true,
        },
      ],
      dataIndex: 'id',
      valueEnum: blankCardTypeEnum,
    },
    {
      title: '截止时间:',
      rules: [
        {
          required: true,
        },
      ],
      formItemProps: {
        disabledDate: (current: any) => {
          return current && current < moment().startOf('day');
        },
        format: 'YYYY-MM-DD HH:mm:ss',
        showTime: false,
        onChange: (dates: Moment) => {
          formRef.current?.setFieldsValue({
            validPeriod: moment(dates).startOf('day'),
          });
        },
      },
      dataIndex: 'validPeriod',
      valueType: 'dateTime',
    },
  ];

  return (
    <Spin spinning={false}>
      <ProTable<ActivateCardParamsType>
        form={{
          layout: 'vertical',
          autoComplete: 'off',
          initialValues: {
            name: info.name,
          },
        }}
        columns={columns}
        type={'form'}
        formRef={formRef}
      />
    </Spin>
  );
};
export default OpenCardForm;
